<template>
    <div class="page-container">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="Time range">
                <el-date-picker class="rangePicker" format="YYYY-MM-DD" v-model="formInline.timeRange" type="daterange" range-separator="To" start-placeholder="Start date" end-placeholder="End date" />
            </el-form-item>
            <el-form-item style="margin-right: 0;">
                <el-button type="primary" size="small" @click="onSubmit">Query</el-button>
                <el-button type="warning" size="small" @click="onReset">Reset</el-button>
            </el-form-item>
        </el-form>
        <div class="tj-items">
            <div class="tj-item">
                <div>Transaction</div>
                <div>7</div>
            </div>
            <div class="tj-item">
                <div>Token</div>
                <div>100</div>
            </div>
            <div class="tj-item">
                <div>Session通话数量</div>
                <div>10</div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue'
const formInline = reactive({
    timeRange: [],
})
const onReset = () => {
    formInline.timeRange = []
}
const onSubmit = () => {
    console.log('submit!')
}
</script>
<style lang="scss" scoped>
.demo-form-inline {
    border-bottom: 1px solid #eee;
    margin-bottom: 20px;
    text-align: right;

    .el-form-item {
        margin-right: 10px;
    }
}

.demo-form-inline .rangePicker .el-range-input {
    width: 150px;

}

.demo-form-inline {
    :deep(.el-input__wrapper) {
        width: auto;

        .el-range-input {
            width: 120px;
        }
    }
}

.demo-form-inline .el-input {
    --el-input-width: 150px;
}

.demo-form-inline .el-select {
    --el-select-width: 150px;
}

.tj-items {
    display: flex;
    justify-content: space-between;
    padding: 8px;

    .tj-item {
        width: 30%;
        padding: 10px;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
        text-align: center;

        div:first-child {
            color: #6c757d;
            font-size: 14px;
            margin-bottom: 8px;
        }

        div:last-child {
            color: var(--el-color-primary);
            font-size: 18px;
            font-weight: 600;
        }
    }
}
</style>